<template>
	<view class="">
		<input type="text" placeholder="搜索" @click="inp" v-model="val"> 
		<button type="default" @click="souba">搜吧</button>
		<view class="slu">搜索记录：
		 <span v-for="(item,index) in slv" :key="index">{{item}}</span></view>
		
				<view class="sou_list">
								<ul v-for="(item,index) in list2" :key="index">
									<li>
										<img :src="item.pic" alt="">
										<span>特征：{{item.brief}}</span><br />
										<span class="span2">点赞：{{item.price}}</span><br />
										<span>距离：{{item.shopName}}</span>
									</li>
									<li></li>
								</ul>
				</view>
				
				
	</view>
</template>

<script>
	export default {
		data(){
			
			return {
				list:[],
				list2:[],
				val:'',
				slv:['好吃','三']
				
			}
		},
		
		
		
		mounted() {
			uni.request({
			    url:'http://111.67.198.176:8112/prod/tagProdList', 
				method:'GET',
			    data: {
			        text: 'uni.request'
			    },			
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
			    success: (res) => {	
					this.list=res.data[2].productDtoList
					this.list2=res.data[2].productDtoList
			        this.text = 'request success';
			    },
				
			});
			
			
		
		},
		
		
		methods:{
			inp(){
				//闲的没事  查看数据  -- 没啥用的方法
				console.log(this.list)
				this.list2 = []
			},
				//点击搜索的时候
			souba(){
				console.log(this.val)
					this.list2 = this.list.filter((item)=>{
						return item.brief.includes(this.val)
					})
					//打印数据
					console.log(this.list2)
					this.slv.push(this.val)
					 // this.slv = this.val
					
			},
			
			
			
			
			
		}
		
		
		
		
	}

</script>

<style lang="scss" scoped>
		input{
			width: 180px;
			height: 20px;
			border: solid 1px #ccc;
			margin-left: 20px;
			margin-top: 10px;
			border-radius: 20px;
			text-align: center;
			margin-bottom: 20px;
			// background: #ccc;
			float: left;
			font-size: 14px;
		}
		
		.sou_list{
				width: 100%;
				height: 450px;
				// background: #ccc;
				overflow: auto;
		}
		
		ul{
			margin-top: 20px;
			li{
				width: 100%;
				clear: both;
				height: 40px;
				
				
				img{
					width: 100px;
					height: 100px;
					margin-left: 40px;
					float: left;
					margin-right: 20px;
					border-radius: 10px;
				}
				
				span{
					font-size: 14px;
					margin-bottom: 10px;
				}
				
				.span2{
					display: inline-block;
					margin-top: 10px;
					font-size: 14px;
				}
			}
		}
		
		button{
			width: 60px;
			font-size: 12px;
			height: 25px;
			display: inline-block;
			margin-left: 30px;
			margin-top: 10px;
			border-radius: 10px;
			line-height: 25px;
			border: solid 1px #ccc;
		}
		
		.slu{
			width: 100%;
			// height: 50px;
			clear: both;
			padding-left: 20px;
			font-size: 14px;
			display: flex;
			flex-wrap: wrap;
			
			span{
				width: 50px;
				height: 20px;
				margin-left: 10px;
				border: solid 1px #ccc;
				display: inline-block;
				text-align: center;
				border-radius: 20px;
				
				
			}
		}
</style>